<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>

<link href="${ctx}/decorators/css/plugins/datapicker/datepicker3.css"	rel="stylesheet">
	<link href="${ctx}/decorators/css/plugins/chosen/chosen.css"	rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${ctx}/webuploader/css/webuploader.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/webuploader/css/webuploader-demo.css"/>
<script type="text/javascript" src="${ctx}/webuploader/js/webuploader.min.js" ></script>
<script type="text/javascript" src="${ctx}/webuploader/js/webuploader-demo-addProduct.js" ></script>
<script src="${ctx}/decorators/js/plugins/chosen/chosen.jquery.js"></script>
<script	src="${ctx}/decorators/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="${ctx}/assert/js/jquery.validate.min.js" ></script>
<link rel="stylesheet" type="text/css" href="${ctx}/decorators/css/plugins/toastr/toastr.min.css"></link>
<script src="${ctx}/decorators/js/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript" src="${ctx}/assert/js/common.js" ></script>
<meta charset="utf-8">
<title>产品信息页面</title>
<script type="text/javascript">
$(document).ready(function(){
	$('input:radio[name="videoType"]').change( changeVideoType);
	
	$(".form_datetime").datepicker({
		todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true,
		format: 'yyyy-mm-dd'
	});
	
	jQuery.validator.addMethod("isNutrient", function(value, element) {
		var str = value.split(',');
		var flag = false;
		var reg = /^((\d+\.?\d*)|(\d*\.\d+))\%$/;
		for(var i=0;i<str.length;i++){
			var str1 = str[i].split('/');
			if(str1.length == 3){
				for(var i=0;i<str1;i++){
					if(reg.test(str1[3])){//是百分数
						var num = Number(str1[3].replace("%",""));
						if(num <= 100 ){
							flag = true;
						}
					}
				}								
			}			
			
		}
		return this.optional(element) || (flag);
	}, "只能输入规定格式内容");	
	jQuery.validator.addMethod("isNum", function(value, element) {
		var num = /[0-9]$/;
		return this.optional(element) || (num.test(value));
	}, "只能输入数字");	
	jQuery.validator.addMethod("isDate", function(value, element) {
		var num = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
		return this.optional(element) || (num.test(value));
	}, "只能输入日期");	

	jQuery.validator.addMethod("isVideoAddr", function(value, element) {
		var reg = /.mp4$/;
		return this.optional(element) || (reg.test(value));
	}, "请输入正确的视频地址");
	
 $("#addForm").validate({
			debug : false,
			rules : {
				pName : {
					required : true,
					minlength : 2,
					maxlength : 20
				},
				info : {
					required : true,
					minlength : 2,
					maxlength : 100
				},
				pLicense : {
					required : true,
					minlength : 2,
					maxlength : 20
				},
				referPrice : {
					required : true,
					min : 0,
					maxlength : 10,
					isNum : true
				},
				producePlace : {
					required : true,
					maxlength : 100
				},
				date : {
					required : true,
					isDate :true				
				},
				keepTime : {
					required : true,
					minlength : 1,
					maxlength : 10,
					isNum : true
				},
				brand : {
					required : true,
					minlength : 1,
					maxlength : 20
				},
				templateCode : {
					minlength : 1,
					maxlength : 5,
					isNum : true
				},
				cName : {
					required : true,
					minlength:1,
					maxlength:20
				},
				cValue : {
					required : true,
					minlength:1,
					maxlength:500
				},
				dosing : {
					maxlength : 100
				},
				nutrient : {
					maxlength : 500,
//					isNutrient :true
				},
				fileVideoAdd :{
					maxlength : 100,
					/* isVideoAddr : true, */
				}
			},
			messages : {
				pName : {
					required : "请输入产品名称",
					minlength : "产品名称最小为两位",
					maxlength : "产品名称最大为二十位"
				},
				info : {
					required : "请输入产品简介",
					minlength : "产品简介最小为两位",
					maxlength : "产品简介最大为100位"
				},
				pLicense : {
					required : "请输入生产许可证编号",
					minlength : "生产许可证编号最小为两位",
					maxlength : "生产许可证编号最大为20位"
				},
				referPrice : {
					required : "请输入参考价格",
					min : "请填写大于0的数",
					maxlength : "价格最大为10位",
					isNum : "只能输入数字"
				},
				producePlace : {
					required : "请输入产地",					
					maxlength : "产地最大为100位"
				},
				date : {
					required : "请选择生产日期",
					isDate :"请选择生产日期"
				},
				keepTime : {
					required : "请输入保质期",
					minlength : "保质期最小为1位",
					maxlength : "保质期最大为10位",
					isNum : "只能输入数字"
				},
				brand : {
					required : "请输入品牌名",
					minlength : "品牌名最小为1位",
					maxlength : "品牌名最小为20位"
				},
				templateCode : {
					minlength : "模板编号最小为1位",
					maxlength : "模板编号最小为5位",
					isNum : "只能输入数字"
				},
				cName : {
					required : "请输入字段名",
					minlength : "字段名最小为1位",
					maxlength : "字段名最大为20位"
				},
				cValue : {
					required : "请输入字段信息",
					minlength : "字段名最小为1位",
					maxlength : "字段名最大为500位"
				},
				dosing : {
					maxlength : "配料最大为100位"
				},
				nutrient : {
					maxlength : "营养成分最大为500位",
//					isNutrient : "请输入规定格式内容"
				},
				fileVideoAdd :{
					maxlength : "链接地址最大为100位",
					isVideoAddr : "请输入正确的视频地址",
				}
			}
		});
	
 
 $("#addColumn").click(function(){
//	 alert('---')
	if (!$("#addForm").valid()) {
			return;
		}
		
	var length = document.getElementsByName("cName").length;
	if(length > 0){
		for(var i=0;i<length;i++){
			var val = document.getElementsByName("cName")[i].value;
			var val1 = document.getElementsByName("cValue")[i].value
			if(isEmpty(val) || isEmpty(val1)){
				return;
			}
		}			
	}

		var addDiv = $('#addDiv');
		var str = '<div class="row">\
					<div class="form-group" >\
						<div style="display: block;" id="attrDiv_1">\
							<label id="attrLabel1"  class="col-sm-6 control-label" style="display: none">：</label>\
							<div  class="col-sm-6"  style="padding-left:30%;">\
								<input type="text" class="form-control attr" placeholder="请输入属性名称" maxlength="20" style="display: block"	 name="cName" id="cName" />\
							</div>\
							<div class="col-sm-6" ><div class="col-sm-9" style="padding-left:0;">\
								<input type="text" class="form-control attr" placeholder="请输入属性值"  name="cValue" id="cValue"  />\
							</div>\
							<div class="col-sm-3" >\
								<input type="button" class="btn btn-danger btn-xs" value="移除" onclick="delColumn(this);return false;"/>\
								<input type="hidden" name="eId" value="0"/>\
							</div>\
						</div>\
						<div style="display: none;" id="errDiv1">\
							<label id="errMsg1" style="color: red"></label>\
						</div>\
					</div>\
				</div>\
			</div>';
		addDiv.before(str);
 });

//	checkName();
});
	






	function PreviewImage(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			$('#alertModal').modal('show')
			document.getElementById("alertMessage").innerHTML = "系统仅支持jpg/jpeg/png/gif/bmp格式的照片！";
			imgFile.focus();
			document.getElementById("fileImage").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("imgPreview").innerHTML = "";
				document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("imgPreview").innerHTML = "<img src='"+path+"' width='150px' height='100px'/>";
				document.getElementById("removeImageBtn").style.display = "";
				document.getElementById("uploadImage").style.display = "none";
				document.getElementById("imageDiv").style.display = "none";
				document.getElementById("img").value = null;

			}
		}
	}

	function PreviewLogo(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			$('#alertModal').modal('show')
			document.getElementById("alertMessage").innerHTML = "系统仅支持jpg/jpeg/png/gif/bmp格式的照片！";
			imgFile.focus();
			document.getElementById("fileLogo").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("logoPreview").innerHTML = "";
				document.getElementById("logoPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("logoPreview").innerHTML = "<img src='"+path+"' width='150px' height='100px'/>";
				document.getElementById("removeLogoBtn").style.display = "";
				document.getElementById("uploadLogo").style.display = "none";
				document.getElementById("logoDiv").style.display = "none";
				document.getElementById("logo").value = null;
			}
		}
	}
	
	function PreviewVideoImg(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			$('#alertModal').modal('show')
			document.getElementById("alertMessage").innerHTML = "系统仅支持jpg/jpeg/png/gif/bmp格式的照片！";
			imgFile.focus();
			document.getElementById("fileVideoImg").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("videoImgPreview").innerHTML = "";
				document.getElementById("videoImgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("videoImgPreview").innerHTML = "<img src='"+path+"' width='150px' height='100px'/>";
				document.getElementById("removeVideoImgBtn").style.display = "";
				document.getElementById("uploadVideoImg").style.display = "none";
				document.getElementById("videoImgDiv").style.display = "none";
				document.getElementById("videoImg").value = null;
			}
		}
	}
	
	function PreviewVideo(imgFile) {
		var pattern = /(\.*.mp4$)|(\.*.mov$)/;
		if (!pattern.test(imgFile.value)) {
			$('#alertModal').modal('show')
			document.getElementById("alertMessage").innerHTML = "系统仅支持mp4格式的视频！上传视频不大于200M！";
			imgFile.focus();
			document.getElementById("fileVideo").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("videoPreview").innerHTML = "";
				document.getElementById("videoPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
/* 				<video  poster="" controls="" crossorigin="" style="width:400px !important;" id="uploadVideo"><!--poster：图片-->
					 <source src="${imageUrl}${productView.product.video }" type="video/mp4">
				</video>  */
				/* <img src='"+path+"' width='150px' height='100px'/> */
				document.getElementById("videoPreview").innerHTML = "<video  poster='' controls='' crossorigin='' style='width:200px !important;' id='uploadVideo'>\
				 +<source src='"+path+"' type='video/mp4'>\
					+</video><span class='help-block m-b-none'>系统仅支持MP4格式视频，上传视频不大于200M</span>";
				document.getElementById("removeVideoBtn").style.display = "";

				document.getElementById("video").value = null;
			}
		}
	}
	
	function removeVideoImg(sign) {
		if (sign == 1) {
			document.getElementById("videoImgPreview").innerHTML = "";
			document.getElementById("removeVideoImgBtn").style.display = "none";
			document.getElementById("fileVideoImg").value = "";
		} else {
			document.getElementById("videoImgDiv").style.display = "none";
			document.getElementById("videoImg").value = null;
		}
	}

	function removeVideo(sign) {
		if (sign == 1) {
			document.getElementById("videoPreview").innerHTML = "";
			document.getElementById("removeVideoBtn").style.display = "none";
			document.getElementById("fileVideo").value = "";
		} else {
			document.getElementById("videoDiv").style.display = "none";
			document.getElementById("video").value = null;
		}
	}
	
	function removeImage(sign) {
		if (sign == 1) {
			document.getElementById("imgPreview").innerHTML = "";
			document.getElementById("removeImageBtn").style.display = "none";
			document.getElementById("fileImage").value = "";
		} else {
			document.getElementById("imageDiv").style.display = "none";
			document.getElementById("img").value = null;
		}
	}

	function removeLogo(sign) {
		if (sign == 1) {
			document.getElementById("logoPreview").innerHTML = "";
			document.getElementById("removeLogoBtn").style.display = "none";
			document.getElementById("fileLogo").value = "";
		} else {
			document.getElementById("logoDiv").style.display = "none";
			document.getElementById("logo").value = null;
		}
	}
	
	
	


	
 	//删除自定义属性
	function delColumn(nowTr){
			var id = $(nowTr).next().val();
//			alert(id);
			if(id == undefined || id == 0){
				$(nowTr).parent().parent().parent().parent().parent().remove();
				return;
			}
			$.ajax({
				type : "POST",
				url : "delExtraColumn", //换成你要请求的action, paperId 是url参数
				data : {
					'id' : id
				},
				async : false,
				error : function(msg) {
					toastr.error("删除失败！")
				},
				success : function(msg) {
					if(msg == "success"){
						toastr.success("属性删除成功")
					}else{
						toastr.error("删除失败！")
						return;
					}					
				}
			})
		
		 $(nowTr).parent().parent().parent().parent().remove(); 
	}
 	

	
	/**
	 * 保存厂商
	 */
	function submitForm() {
		var pName = $("#pName").val();
		var id = $("#productId").val();
		var vId = $("#vId").val();
//		alert(pName)
//		alert(id)
//		alert(vId)
		if (isEmpty(id)) {
			id = 0;
		}
		var produceDate = $("#produceDate").val();
//		alert(produceDate)
		var begin = produceDate.replace(/-/g,"");
		
		var now = new Date();
		var year = now.getFullYear();
        var month =(now.getMonth() + 1).toString();
        var day = (now.getDate()).toString();
        if (month.length == 1) {
            month = "0" + month;
        }
        if (day.length == 1) {
            day = "0" + day;
        }
        var end = year + month +  day;
	      //js判断日期
	      if(begin-end>0){
	    	  toastr.error("生产日期不能超过当前日期!");  
	         return false;
	      }
	      
		//表单验证
		if (!$("#addForm").valid()){
			return;
		}

		$.ajax({
			type : "POST",
			url : "checkName", //换成你要请求的action, paperId 是url参数
			data : {
				'id' : id,
				'pName' : pName,
				'vId' : vId
			},
			dateType : 'text',
			error : function(msg) {
				toastr.error("保存失败！");
				return;
			},
			success : function(data) {
				if (data == 'success') {
					//document.addForm.submit();
					saveForm();					
				} else {
					toastr.error("用户名已存在")
					$("#msgDiv").show();
					$("#errMsg").html("系统中有重复的公司名称，请重新输入");
					$("#errMsg").show();
					$("#vName").select();
					return;
				}				
			}
		});
		
	}
	
	function saveForm(){
		var formdata = new FormData($("#addForm")[0]);
		$.ajax({
		    url: 'addProducting',
		    type: 'POST',
		    data: formdata,
		    async: false,
		    contentType: false,
		    processData: false,
		    success: function(msg) {
		        if(msg == "success"){
		        	if($("#uploader img").length == 0){
		        		window.location.href="productList?vId="+$("#vId").val();
		        	}else{
			        	$(".uploadBtn").click();		        		
		        	}
		        }
		    },
		    error: function(data) {
		    	toastr.error("网络连接失败");
		    }
		});
		
	}
	
	/**
	*检查产品名称
	*/
	function checkName(){
		$('#saveBtn').removeAttr("disabled"); 
		
			var pName = $("#pName").val();
			var id = $("#productId").val();
			var vId = $("#vId").val();
			if (isEmpty(id)) {
				id = 0;
			}			
			if (isEmpty(pName)) {
				return;
			}
			$.ajax({
				type : "POST",
				url : "checkName", //换成你要请求的action, paperId 是url参数
				data : {
					'id' : id,
					'pName' : pName,
					'vId' : vId
				},
				dateType : 'text',
				error : function(msg) {
					toastr.error("保存失败！")
				},
				success : function(msg) {
					if(msg == "success"){
						//alert("用户名可用")
					}else{
						toastr.error("用户名已存在")
						$('#saveBtn').attr("disabled",true);
					}
				}
			});
		
		
	}
	
	function changeVideoType(){
		var val = $("[type='radio']:checked").val();
		if(val == 0){
			document.getElementById('videoAddr').style.display = "none";
			document.getElementById('videoUpload').style.display = "";
			document.getElementById("fileVideoAdd").value = "";
		}else{
			document.getElementById('videoUpload').style.display = "none";
			document.getElementById('videoAddr').style.display = "";
			removeVideo(1);
		}
	}
	
	function delImg(id){
		//alert(id);
		
		$.ajax({
			type : "POST",
			url : "delImg", //换成你要请求的action, paperId 是url参数
			data : {
				'id' : id
			},
			error : function(msg) {
				toastr.error("网络连接失败");				
			},
			success : function(msg) {
				if(msg == "success"){
					$("#img"+id+" img" ).attr("src","")
					$("#img"+id).html("");
				}else{
					toastr.error("删除图片失败");
				}
				
			}
		});
	}
</script>
</head>
<body>

		<div class="wrapper wrapper-content animated fadeInUp">

		<div class="row">
			<div class="col-lg-12">
				<div class="ibox">	
					<div class="ibox-title">
						<div class="row">
	                        <div class="col-lg-11">
	                             <h3>产品信息编辑</h3>
	                         </div>
	                         <div class="col-lg-1">
	                             <a class="btn btn-success btn-block" href="${ctx}/admin/productList">返回列表
	                             </a>
	                         </div>
						  </div>
					</div>	
				<div class="ibox-content">
					<form class="form-horizontal" role="search" name="addForm"
						id="addForm" method="post" action="${ctx}/admin/addProducting"
						enctype="multipart/form-data">
						<input type="hidden" name="id"  id="productId" />
						<input type="hidden" name="vId" value="${vId }"
							id="vId" />	
						<div style="display: none" id="msgDiv">
							<label id="errMsg" style="color: red"></label>
						</div>
				<div class="row">
					<div class="col-md-6">
						<div class="row">
							<div class="form-group">
								<label for="pName" class="col-sm-6 control-label"><font color=red>*</font>产品名称：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " placeholder="请输入产品名称"
										maxlength="20" value="${productView.product.pName}" name="pName"
										id="pName" onblur="checkName()" />
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="brand" class="col-sm-6 control-label"><font color=red>*</font>品牌：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " maxlength="100"
										placeholder="请输入品牌" name="brand"
										value="${productView.product.brand }" />
								</div>
							</div>
						</div>				
						
						<div class="row">
							<div class="form-group">
								<label for="pLicense" class="col-sm-6 control-label"><font color=red>*</font>产品生产许可证编号：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " maxlength="100"
										placeholder="请输入产品生产许可证编号" name="pLicense"
										value="${productView.product.PLicense }" />
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="referPrice" class="col-sm-6 control-label"><font color=red>*</font>参考价格(单位/元)：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " placeholder="请输入价格"
										maxlength="10" name="referPrice" value="${productView.product.referPrice }" />
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="producePlace" class="col-sm-6 control-label"><font color=red>*</font>产地：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " placeholder="请输入产地" maxlength="100"
										name="producePlace" value="${productView.product.producePlace }" />
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="produceDate" class="col-sm-6 control-label"><font color=red>*</font>生产日期：</label>
								<div class="col-sm-6">
									
									<input type="text" class="form-control form_datetime" placeholder="请输入生产日期" id="produceDate"
										name="date" value='<fmt:formatDate value="${productView.product.produceDate}" pattern="yyyy-MM-dd"/>' />
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="keepTime" class="col-sm-6 control-label"><font color=red>*</font>保质期（单位/天）：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " placeholder="请输入保质期" maxlength="20"
										name="keepTime" value="${productView.product.keepTime }" />
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="dosing" class="col-sm-6 control-label">配料：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " placeholder="请输入配料" 
										name="dosing" value="${productView.product.dosing }" />
										<span class="help-block m-b-none">以英文逗号隔开，eg：白糖，盐</span>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="nutrient" class="col-sm-6 control-label">营养成分：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " placeholder="请输入营养成分" id="nutrient"
										name="nutrient" value="${productView.product.nutrient }" />
										<span class="help-block m-b-none">以英文逗号隔开，eg：水/200g/90%，酒精/30g/10%</span>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="templateCode" class="col-sm-6 control-label">模板编号：</label>
								<div class="col-sm-6">
									<input type="text" class="form-control " placeholder="请输入模板编号" maxlength="20"
										name="templateCode" value="${template.templateCode }" />
								</div>
							</div>
						</div>
						
						<c:if test="${productView.extraColumnList != null  }">
							<c:forEach var="ec"   items="${productView.extraColumnList }"   varStatus="status">
								<div class="row">
									<div class="form-group">
										<label for="cName" class="col-sm-6 control-label">${ec.cName }：
											</label>
										<div class="col-sm-6" >
										 <div class="col-sm-9" style="padding-left:0;">
										 	<input type="hidden" class="form-control " placeholder="请输入字段信息"
												name="cName" value="${ec.cName }"  />
											<input type="text" class="form-control " placeholder="请输入字段信息"
												name="cValue" value="${ec.cValue }"  />
											</div>
											<div class="col-sm-3" >
												<button onclick="delColumn(this);return false;" class="btn btn-danger btn-xs">移除</button>
												<input type="hidden" name="eId" value="${ec.id }"/>
											</div>
										
										</div>
									</div>						
								</div>
								
							</c:forEach>
						</c:if>
						
						
						<div id="addDiv">
							<div class="form-group">
								<div class="col-sm-6"></div>
								<div class="col-sm-6" >
								  <input type="button" class="btn btn-primary btn-sm"  value="新增产品属性" id="addColumn" />
								</div>
										
							</div>			
						</div>
						
						
						
					</div>
					
					
					<div class="col-md-6">
						
						
						<div class="row" >
							<div class="form-group">
								<label for="fileLogo" class="col-sm-4 control-label">产品LOGO：</label>
								<div class="col-sm-8">
									<input type="file" name="fileLogo" id="fileLogo"
										onchange='PreviewLogo(this)' />
									<div id="logoPreview" style="margin:10px 0;" ></div>
									<input type="button" class="btn btn-danger btn-xs" value="移除"
										style="display: none;"
										onclick="removeLogo(1)" id="removeLogoBtn" />
									<c:if
										test="${productView.product.logo!=null&&not empty productView.product.logo}">
										<div id="logoDiv" class="uploadimg" >
											<img alt="LOGO"
												src="${imageUrl}${productView.product.logo }" id="uploadLogo" />
												 <input type="hidden" name="logo" id="logo" value="${productView.product.logo }" /> 
												 <input type="button" class="btn btn-danger btn-xs" value="移除"
												onclick="removeLogo(2)"  />
										</div>
									</c:if>
								</div>
							</div>
						</div>
						
						<div class="row " >
							<div class="form-group">
								<label for="fileVideoImg" class="col-sm-4 control-label">视频图片：</label>
								<div class="col-sm-8">
									<input type="file" name="fileVideoImg" id="fileVideoImg"
										onchange='PreviewVideoImg(this)' />
									<div id="videoImgPreview"  style="margin:10px 0;" ></div>
									<input type="button" class="btn btn-danger btn-xs" value="移除"
										style="display: none; "
										onclick="removeVideoImg(1)" id="removeVideoImgBtn" />
									<c:if
										test="${productView.product.videoImg!=null&&not empty productView.product.videoImg}">
										<div id="videoImgDiv" class="uploadimg" style="margin:10px 0;">
											<!-- <img alt="VIDEOIMG" src="${imageUrl}${productView.product.videoImg }" id="uploadVideoImg" /> -->
											<embed src="${productView.product.video }" id="uploadVideo"></embed>
												 <input type="hidden" name="videoImg" id="videoImg" value="${productView.product.videoImg }" /> 
												 <input type="button" class="btn btn-danger btn-xs" value="移除"
												onclick="removeVideoImg(2)"  />
										</div>
									</c:if>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="form-group">
								<label for="nutrient" class="col-sm-4 control-label">视频路径选择：</label>
								<div class="col-sm-6">
									
									<label><input type="radio" name="videoType" value="0" checked="checked">上传产品视频</label>
									<label><input type="radio" name="videoType" value="1">输入视频地址</label>
								</div>
							</div>
						</div>
						
						
						
						
						
						<div class="row" >
							<div class="form-group">
								<label for="fileLogo" class="col-sm-4 control-label">产品视频：</label>
								<div class="col-sm-8" id="videoUpload" >
									<input type="file" name="fileVideo" id="fileVideo"
										onchange='PreviewVideo(this)' />
									<div id="videoPreview" style="margin:10px 0;"></div>
									<input type="button" class="btn btn-danger btn-xs" value="移除"
										style="display: none;"
										onclick="removeVideo(1)" id="removeVideoBtn" />
									<c:if
										test="${productView.product.video!=null&&not empty productView.product.video}">
										<div id="videoDiv" class="uploadimg">
											<!-- <img alt="VIDEO" src=""  /> -->
												 <input type="hidden" name="video" id="video" value="${productView.product.video }" /> 
												 <input type="button" class="btn btn-danger btn-xs" value="移除"
												onclick="removeVideo(2)" />
												
												<video  poster="" controls="" crossorigin="" style="width:200px !important;" id="uploadVideo"><!--poster：图片-->
	                       							 <source src="${imageUrl}${productView.product.video }" type="video/mp4">
                   								</video> 
													<span class="help-block m-b-none">系统仅支持MP4格式视频，上传视频不大于200M</span>
												
										</div>
									</c:if>
								</div>
								
								<div class="col-sm-8" id="videoAddr" style="display:none;">
									<input type="text" class="form-control" placeholder="请输入视频地址" name="fileVideoAdd" id="fileVideoAdd"  />
									<span class="help-block m-b-none">系统仅支持MP4格式视频，eg：www.aiqiyi.com/123456.mp4</span>							
								</div>
								
							</div>
						</div>
						
							
					
					</div>
					
					
					<div class="ibox">	

							<div class="ibox-content">
								<div class="page-container">
									<p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮</p>
									<div id="uploader" class="wu-example">
										<div class="queueList">
											<div id="dndArea" class="placeholder">
												<div id="filePicker" class="webuploader-container">
												<div class="webuploader-pick" style=" position: relative;">
												点击选择图片	
												<div id="rt_rt_1aa3dju5ks4pt80p7p1nsr1m6e1" 
														style="position: absolute; top: 0px; left: 317px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;">
														<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
														<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
												</div>
												</div>

												</div>
												<p>或将照片拖到这里，单次最多可选300张</p>
											</div>
										<ul class="filelist"></ul></div>
										<div class="statusBar" style="display:none;">
											<div class="progress" style="display: none;">
												<span class="text">0%</span>
												<span class="percentage" style="width: 0%;"></span>
											</div>
											<div class="info">共0张（0B），已上传0张</div>
											<div class="btns">
												<div id="filePicker2" class="webuploader-container"><div class="webuploader-pick">继续添加</div><div id="rt_rt_1aa3dju5onv6bep8t06qtee36" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div>
												<button type="button" class="uploadBtn state-pedding" style=" display:none;">开始上传</button>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					

						
						
						</div>
						
<!-- 							<div class="form-group">
								<div class="col-sm-6">
									<div class="col-sm-6"></div>
									<div class="col-sm-6" >
									  <input type="button" class="btn btn-success" value="保存"onclick="submitForm()" id="saveBtn" />
									  <a href="productList">
									 	 <input type="button" class="btn btn-warning" value="取消" />
									  </a>
									</div>
								</div>		
							</div>	 -->
							
							<div class="form-group text-center">

									<button class="btn btn-primary" type="button" id="saveBtn"  onclick="submitForm()" id="saveBtn">&#12288;保存&#12288;</button>

							</div>
							
							
							
							
							
					</form>
				</div>
				</div>
			</div>
		</div>
	</div>



	<!-- Modal -->
	<div class="modal fade" id="alertModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertMessage"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" data-dismiss="modal" class="btn btn-primary">确定</button>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
